<template>
  <!-- 头部 -->
  <div id="class">
    <div class="class_hea clear">
      <img
        src="../assets/img-class/Class/矢量智能对象.png"
        alt=""
        class="hea_center"
        @click="handleClick"
      />
      <router-link
        v-for="(item, index) in headerNav"
        :to="item.url"
        tag="div"
        :key="index"
        class="tab"
        >{{ item.title }}</router-link
      >

      <p class="p1">
        <img src="../assets/img-class/Class/矢量智能对象(1).png" alt="" />搜索
      </p>
      <p>
        <img
          src="../assets/img-class/Class/矢量智能对象(2).png"
          alt=""
        />我的课程
      </p>
    </div>
  </div>

  <van-pull-refresh
    v-model="state.loading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <router-view></router-view>
  </van-pull-refresh>
</template>
<script>
import { Toast } from "vant";
import { reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const headerNav = reactive([
      {
        title: "实用心理课",
        url: "/class/xinli",
      },
      {
        title: "咨询师专业课",
        url: "/class/specialClass",
      },
    ]);

    const router = useRouter();
    const handleClick = () => {
      router.go(-1);
    };
    //上拉加载
    const state = reactive({
      loading: false,
    });
    const onRefresh = () => {
      setTimeout(() => {
        Toast("刷新成功");
        state.loading = false;
      }, 1000);
    };
    return { headerNav, handleClick, state, onRefresh };
  },
  // components: {
  //   headerH1,
  //   recommend,
  //   price,
  //   teacher,
  // },
};
</script>
<style lang="less" scoped>
.clear::after {
  content: "";
  height: 0;
  clear: both;
  display: block;
}
#class {
  width: 100%;

  .class_hea {
    width: 100%;
    padding-top: 33px;
    display: flex;
    align-content: space-between;

    img {
      width: 22px;
      height: 22px;
      display: block;
      margin-left: 11px;
      margin-right: 8px;
    }

    .tab {
      display: inline-block;
      margin-top: 0px;
      height: 16px;
      font-size: 16px;
      font-family: PingFang SC;
      color: #040404;
      line-height: 20px;
      margin-right: 22px;
      display: block;
      position: relative;

      // 心理开始
    }
    //tab
    .router-link-active {
      color: #040404;
      font-weight: bold;
      &::after {
        content: "";
        display: block;
        width: 22px;
        height: 4px;
        background-color: #0d99ef;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
      }
    }

    > p {
      position: absolute;
      top: 20px;
      right: 22px;
      margin: 0 0 0 0;
      font-size: 9px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #0c0c0c;
      line-height: 20px;
      img {
        width: 22px;
        height: 22px;
      }
    }
    .p1 {
      text-align: center;
      position: absolute;
      top: 20px;
      right: 70px;
      margin: 0;
    }
  }
}
</style>
